<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { computed, onMounted, reactive, ref } from 'vue'
import { notification } from 'ant-design-vue'
import RepoReport from './components/RepoReport.vue'
import CveReport from './components/CveReport.vue'
import CveRollbackReport from './components/CveRollbackReport.vue'
import HotPatchRemoveReport from './components/HotPatchRemoveReport.vue'
import PageWrapper from '@/components/PageWrapper.vue'
import type { Breadcrumb } from '@/components/PageWrapper.vue'
import type {
  CveRollbackTaskReport,
  CveTaskReport,
  HotPatchRemoveTaskReport,
  RepoTaskReport,
} from '@/api'
import {
  api,
} from '@/api'

const route = useRoute()

const breadcrumb = computed<Breadcrumb[]>(() => {
  const { matched } = route
  return (matched[matched.length - 1].meta.diyBreadcrumb as Array<any>).map((item) => {
    return {
      breadcrumbName: item.breadcrumbName,
      path: item.path,
      label: item.breadcrumbName,
      query: route.query,
    }
  }) as Breadcrumb[]
})

const isResultSpinning = ref(false)
const resultInfo = reactive<{
  taskId: string
  taskType: string
  clusterId: string
  report: RepoTaskReport[] | CveTaskReport[] | CveRollbackTaskReport[] | HotPatchRemoveTaskReport[]
}>({
  taskId: '',
  taskType: '',
  clusterId: '',
  report: [],
})

async function queryTaskResult() {
  isResultSpinning.value = true
  const params = {}
  const { clusterId, taskId } = resultInfo
  params[clusterId] = { task_id: taskId }
  const { taskType } = resultInfo

  let label: string = ''

  if (taskType === 'repo set') {
    const [, res] = await api.getRepoSetTaskResult(params)
    if (res) {
      resultInfo.report = res[clusterId].data
      label = res[clusterId].label
    }
  }
  else if (taskType === 'cve fix') {
    const [, res] = await api.getCveFixTaskResult(params)
    if (res) {
      resultInfo.report = res[clusterId].data
      label = res[clusterId].label
    }
  }
  else if (taskType === 'cve rollback') {
    const [, res] = await api.getCveRollbackTaskResult(params)
    if (res) {
      resultInfo.report = res[clusterId].data
      label = res[clusterId].label
    }
  }
  else {
    const [, res] = await api.getHotPatchRemoveTaskResult(params)
    if (res) {
      resultInfo.report = res[clusterId].data
      label = res[clusterId].label
    }
  }
  if (label !== 'Succeed') {
    notification.error({
      message: 'Error',
      description: label,
    })
    return
  }
  isResultSpinning.value = false
}

onMounted(() => {
  resultInfo.taskId = route.query.taskId as string
  resultInfo.taskType = route.query.taskType as string
  resultInfo.clusterId = route.query.clusterId as string
  queryTaskResult()
})
</script>

<template>
  <PageWrapper :breadcrumb="breadcrumb">
    <a-card>
      <a-spin :spinning="isResultSpinning" size="large">
        <RepoReport
          v-if="resultInfo.taskType === 'repo set'"
          :task-report="resultInfo.report as RepoTaskReport[]"
        />
        <CveRollbackReport
          v-else-if="resultInfo.taskType === 'cve rollback'"
          :task-report="resultInfo.report as CveRollbackTaskReport[]"
        />
        <HotPatchRemoveReport
          v-else-if="resultInfo.taskType === 'hotpatch remove'"
          :task-report="resultInfo.report as HotPatchRemoveTaskReport[]"
        />
        <CveReport v-else :task-report="resultInfo.report as CveTaskReport[]" />
      </a-spin>
    </a-card>
  </PageWrapper>
</template>

<style lang="less" scoped>
.icon {
  transform: translate(0, 5px);
}
.result {
  margin-left: 20px;
}
</style>
